<template>
  <div class="search-panel" :class="expanded ? 'expanded' : ''" autocomplete="off">
    <div class="search-header">
      <div class="keywords">
        <slot name="keywords">&nbsp;</slot>
      </div>
      <a class="extra" @click.native="toggleFilters">
        <template v-if="expanded">
          <span>收起</span>
          <UpCircleOutlined />
        </template>
        <template v-else>
          <span>高级查询</span>
          <DownCircleOutlined />
        </template>
      </a>
    </div>
    <div class="filters">
      <slot>&nbsp;</slot>
    </div>
    <div class="buttons">
      <Button type="primary" shape="round" html-type="button" @click="emit('search')"> <SearchOutlined /> 查询 </Button>
      <Button type="primary" danger shape="round" html-type="button" @click="emit('reset')"> <DeleteOutlined /> 重置 </Button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';

import { Button } from 'ant-design-vue';
import { UpCircleOutlined, DownCircleOutlined, SearchOutlined, DeleteOutlined } from '@ant-design/icons-vue';

const expanded = ref(false);
const emit = defineEmits(['search', 'reset']);

const toggleFilters = () => {
  expanded.value = !expanded.value;
};
</script>
<style lang="less">
.search-panel {
  width: 100%;
  background: #fff;
  position: relative;
  margin-top: 5px;
  margin-bottom: 5px !important;
  padding: 10px;
  display: flex;
  flex-flow: row wrap;
  line-height: 1.5715;
  vertical-align: middle;
  user-select: none;
  align-content: center;

  label {
    min-width: 105px;
    padding-right: 6px;
    text-align: right;
    font-size: 13px;
    font-weight: normal;
    vertical-align: middle;
    margin-bottom: 0;

    &.checkbox-inline,
    &.radio-inline {
      min-width: auto;
      min-width: initial;
      padding-top: 0;
      white-space: nowrap;
    }
  }

  > .search-header {
    width: calc(100% - 300px);

    &.multi-keywords {
      > .keywords {
        flex-flow: row wrap;

        > .form-control {
          flex: 0 0 35%;
        }

        > .filter {
          flex: 0 0 50%;
          display: flex;

          > .daterange {
            flex: 1;
          }
        }
      }
    }

    > .keywords {
      width: 100%;
      display: flex;
      flex-flow: row nowrap;
      align-content: center;

      > label {
        flex: 0;
      }

      > .form-control {
        flex: 1;
        margin-left: 0px;
      }

      .ant-input-group-addon {
        min-width: 105px;
        text-align: right;
      }
    }

    > .extra {
      color: #1e91e8;
      position: absolute;
      right: 3px;
      top: 4px;
      bottom: 0;
      text-decoration: none;
      cursor: pointer;
      height: 34px;

      > span {
        margin-right: 5px;
      }
    }
  }

  > .filters {
    width: 100%;
    visibility: collapse;
    margin-top: 0;
    display: none;
    flex-flow: row wrap;
    padding-top: 5px;
    margin-bottom: 5px;

    > .row {
      width: 100%;
      flex: auto;
      display: flex;
      flex-flow: row nowrap;
      text-align: left;
      margin: 0;

      & > label {
        flex: 0;
      }

      > * {
        flex: 1;

        label {
          min-width: auto;
          min-width: initial;
          line-height: 20px;
          padding-right: 0;
          font-size: 14px;
        }
      }

      .checkbox-inline,
      .radio-inline {
        top: -2px;
        padding-top: 0;

        > input[type='checkbox'],
        > input[type='radio'] {
          margin-top: 3px;
        }
      }
    }

    > .filter {
      display: flex;
      flex: 0 0 33.3333333%;
      flex-flow: row nowrap;
      white-space: nowrap;
      margin-bottom: 5px;
      align-items: center;

      > label {
        flex: 0;
        margin-bottom: 0;

        &.checkbox-inline,
        &.radio-inline {
          line-height: 24px;
        }
      }

      > * {
        flex: 1;

        label {
          min-width: auto;
          min-width: initial;
          line-height: 20px;
        }
      }
    }

    &.column-1 {
      > .filter {
        flex: 0 0 calc(100%-60px);
      }
    }

    &.column-2 {
      > .filter {
        flex: 0 0 47.5%;
      }
    }

    &.column-3 {
      > .filter {
        flex: 0 0 31.66666666%;
      }
    }

    &.column-4 {
      > .filter {
        flex: 0 0 23.75%;
      }
    }
  }

  > .buttons {
    margin-left: 15px;
    display: inline-block;

    > .ant-btn {
      padding-left: 15px !important;
      padding-right: 15px !important;

      &.ant-btn-dangerous {
        margin-left: 5px;
      }

      > i {
        display: none;
      }
    }
  }

  &.expanded {
    > .search-header {
      width: 100%;
      padding-bottom: 4px;
      border-bottom: 1px dashed #ccc;

      > .keywords {
        width: calc(100% - 260px);
      }
    }

    > .filters {
      display: flex;
      visibility: visible;
    }

    > .buttons {
      margin-left: 105px;
    }
  }
}
</style>
